<template>
<div class="author-detail">

  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->

  <Carousel class="carousel-mar" />

  <!-- 作者详情 -->
  <div class="author-intro module-show margin-xauto" v-if="model.avatar">
    <div class="module-show-item flex">
      <!-- 头像 -->
      <div class="avatar">
        <img :src="model.avatar" alt="">
      </div>
      <!-- 简介 -->
      <div class="intro">
        <p class="intro-name fs-b fc-b0 strong mgt2">{{model.nickname}}</p>
        <div class="intro-num">
          <span class="fs-n">作品数：{{model.panonum}}</span>
          <i class="iconfont icon-dingwei fs-n mgl2" v-if="model.areatext"></i>
          <span class="fs-n" v-if="model.areatext">{{model.areatext}}</span>
          <i class="iconfont icon-denglu fs-n mgl2"></i>
          <span class="fs-n">{{model.isrz==2?'摄影师':model.isrz==1?'认证用户':'普通用户'}}</span>
          <i class="iconfont icon-liulanliang fs-n mgl2"></i>
          <span class="fs-n">{{model.seecount}}</span>
          <i class="iconfont icon-qinziAPPtubiao- fs-n mgl2"></i>
          <span class="fs-n">{{model.praisecount}}</span>
        </div>
      </div>
      <!-- 操作按钮 -->
      <div class="operabtn tar">
        <el-button type="primary" @click="$refs.PersonalData.openDialog(model)">个人资料</el-button>
        <el-button type="success" @click="$refs.Onlinebooking.openDialog()">在线预约</el-button>
      </div>
    </div>
  </div>

  <!-- 分类标签 -->
  <div class="author-tag">
    <div class="module-show margin-xauto flex">
      <div class="author-tag-wai">
        <div class="flex author-tag-content" :style="{'width': allLen + 'px'}" v-scroll.x="">
          <div
            class="author-tag-item hand"
            :style="tag.cate_id == tagActive ? styleObj: ''"
            v-for="(tag, tagix) in tags"
            :key="tagix"
            @click="changeTag(tag)"
          >{{tag.name}}</div>
        </div>
      </div>
      <div class="author-tag-order tac hand">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">{{oderVal}}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">最新作品</el-dropdown-item>
            <el-dropdown-item command="2">最热作品</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>

  <div class="module-show margin-xauto min-h1200">
    
    <PanoList :list="list" lefttop="0" authorDetail="1" v-if="list.length>0" />
    <div class="null tac" v-else>暂无数据</div>
  </div>

  <div class="module-show margin-xauto tac author-page">
    <el-pagination
      :total="count"
      v-if='count'
      @current-change="handlePageChange"
      :current-page.sync='opts.pageIndex'
      :page-size='opts.pageSize'
      size='small'
      background
      layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>
  
  <Aside />

  <PersonalData ref="PersonalData" />
  <Onlinebooking ref="Onlinebooking" />

  <Footer />

</div>
</template>

<script>
export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    Aside: _ => import('@/components/common/Aside'),
    Carousel: _ => import('@/components/common/Carousel'),
    PanoList: _ => import('@/components/common/PanoList'),
    PersonalData: _ => import('@/components/common/PersonalData'),
    Onlinebooking: _ => import('@/components/common/Onlinebooking'),
  },
  data() {
    return {
      oderVal: '最新作品',
      opts: {
        pageIndex: 1,
        pageSize: 24,
        userId: '',
        orderBy: '',
        panoTypeId: 0,
        cateid: 0,
      },
      model: {},
      styleObj: {
        borderColor: $globalconfig.THEME_COLOR,
        color: $globalconfig.THEME_COLOR,
      },
      tags: [],
      tagActive: 0,
      list: [],
      count: 0,
      allLen: 2000, // 分类标签长度
    }
  },
  methods: {
    // 下拉菜单
    handleCommand(command) {
      // console.log(command)
      if (command == 2) {
        this.oderVal = '最热作品'
        this.opts.orderBy = 'seecount_desc'
      } else {
        this.oderVal = '最新作品'
        this.opts.orderBy = ''
      }
      this.getList()
    },
    // 切换分类标签
    changeTag(item) {
      // console.log(item)
      this.tagActive = item.cate_id
      this.opts.pageIndex = 1
      this.opts.cateid = item.cate_id
      this.getList()
    },
    // 获取tag
    getTags() {
      this.$api.getAuthorPanoTags(this.opts).then(res => {
        console.log(res)
        if (res.code == 100) {
          // res.data.unshift({text: '全部', id: -1})
          this.tags = res.data
          // 计算长度
          let len = 0
          this.tags.map(item => {
            len += item.name.length
          })
          let allLen = len * 15 + this.tags.length * 30
          console.log(allLen)
          this.allLen = allLen
        }
      })
    },
    // 翻页
    handlePageChange(val) {
      this.getList()
    },
    // 获取列表
    getList() {
      this.$api.getPanoList(this.opts).then(res => {
        // console.log(res)
        if (res.code == 100) {
          if (res.data && res.data.list && res.data.list.length > 0) {
            this.count = res.data.count
            this.list = res.data.list
          } else {
            this.list = []
            this.count = 0
          }
        }
      })
    },
    
    // 详情页
    getDetail(id) {
      this.$api.getAuthorDetail(id).then(res => {
        console.log(res)
        if (res.code == 100) {
          this.model = res.data
        }
      })
    },
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.opts.userId = this.$route.params.id
      this.getDetail(this.$route.params.id)
      this.getTags()
      this.getList()
    }
  },
}
</script>

<style lang="stylus" scoped>
.author-detail
  width 100%
  min-width 1200px
  .carousel-mar
    margin-top 51px
  .author-intro
    .module-show-item
      width 100%
      position relative
      overflow hidden
      padding 20px 0
      .avatar
        width 100px
        height 100px
        border-radius 50%
        overflow hidden
        margin-right 2%
        img
          width 100%
          height 100%
          border-radius 50%
      .intro
        width calc(98% - 315px)
        min-width 270px
        padding-top 10px
        .intro-num
          margin-top 20px
          margin-bottom 30px
      .operabtn
        width 215px
        height 100px
        line-height 100px

  .author-tag
    border-bottom 1px solid #eeeeee
    border-top 1px solid #eeeeee
    height 50px
    .module-show
      .author-tag-order
        width 130px
        padding-top 10px
        height 50px
        line-height 40px
        border-left 1px solid #eeeeee
        border-right 1px solid #eeeeee
      
      .author-tag-wai
        width calc(100% - 130px)
        .author-tag-content
          // width 100%
          padding-top 10px
          height 40px
          .author-tag-item
            font-size 15px
            padding 0
            height 40px
            line-height 40px
            color #666
            margin-right 30px
            border-bottom 2px solid rgba(0,0,0,0)
            &:hover
              color var(--themeColor)

  .author-page
    padding-top 10px
    padding-bottom 50px
  .module-show
    width 1200px
    
</style>
